<template>
    <van-nav-bar title="我的订单" left-text="" left-arrow @click-left="goBack" />

    <van-tabs v-model:active="status" @click-tab="getOrderData">
        <van-tab v-for="item in statuslist" :title="item.name" :name="item.id">
        </van-tab>
    </van-tabs>

    <van-card v-for="item in list" :key="item.id" :num="item.info.pronum" :thumb="item.info.product.thumbs_text">
        <template #title>
            <h4 style="font-size: 14px;font-weight: bold;">订单号: {{ item.code }}</h4>
        </template>
        <template #tag>
            <van-tag type="danger">{{ item.status_text }}</van-tag>
        </template>
        <template #desc>
            <div v-if="item.info.attrs">
                <van-tag v-for="items in item.info.attrs" type="success" size="medium" style="margin-right: 10px;">
                    {{ items.value }}
                </van-tag>
            </div>
            <van-tag v-else type="danger" size="medium" style="margin-right: 10px;">无商品规格</van-tag>
            <h4 style="font-size: 14px;font-weight: bold;">下单时间: {{ item.createtime }}</h4>
        </template>
        <template #price>
            <h4 style="font-size: 14px;font-weight: bold;">订单总价: {{ item.amount }}</h4>
        </template>
        <template #footer>
            <van-button size="small" type="primary" @click="toPages(item.id, '/order/info')">订单详情</van-button>
            <van-button size="small" type="success" v-if="item.status == '2'" @click="toPages(item.id)">确认收货</van-button>
            <van-button size="small" type="success" v-if="item.status == '4'" @click="toRate(item.id)">评价详情</van-button>
            <van-button size="small" type="danger" v-if="item.status > 0 && item.status != '4'" @click="toPages(item.id, '/order/refund')">申请退货</van-button>
            <van-button size="small" type="danger" v-if="item.status < 0" @click="toPages(item.id, '/order/refundinfo')">退货详情</van-button>
            <van-button size="small" type="danger" v-if="item.status == '-3' && !item.back_text" @click="toPages(item.id, '/order/refundgoods')">待退货</van-button>
            <van-button size="small" type="warning" v-if="item.expresscode" @click="toPages(item.id, '/order/express')">物流详情</van-button>
        </template>
    </van-card>


</template>
<script setup>
import { toRef } from 'vue'

const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const statuslist = ref([
    {
        id: 0,
        name: '全部'
    },
    {
        id: 1,
        name: '已支付'
    },
    {
        id: 2,
        name: '已发货'
    },
    {
        id: 3,
        name: '已收货'
    },
    {
        id: 4,
        name: '已完成'
    },
    {
        id: -1,
        name: '售后'
    },
])
let status = ref(Number(proxy.$route.query.status) ? Number(proxy.$route.query.status) : 1);
const list = ref([])
onBeforeMount(() => {
    getOrderData()
})
const getOrderData = async () => {
    let result = await Api.orderIndex({
        busid: LoginUser.id,
        status: status.value
    });
    if (result.code == 1) {
        list.value = result.data
        result.data.forEach((item) => {
            if (item.info && item.info.attrs) {
                item.info.attrs = JSON.parse(item.info.attrs)
            }
        })
    }
}

const toRate = (id) => {
    proxy.$router.push({
        path: '/order/ratelist',
        query: {
            orderid: id
        }
    })
}

const toPages = (id, url) => {
    if (url) {
        proxy.$router.push({
            path: url,
            query: {
                orderid: id
            }
        })
    }
    else {
        showConfirmDialog({
            title: '确认是否收货?',
        })
            .then(async () => {
                let result = await Api.orderReceipt({
                    busid: LoginUser.id,
                    orderid: id
                });
                if (result.code == 1) {
                    success(result.msg);
                    getOrderData()

                } else {
                    error(result.msg);
                }
            })
            .catch(() => { });
    }
}

</script>